<template>
    <!-- 用户详情页 -->
    <div class="user-detail mtop-20" v-loading="isLoading">
        <!-- 头部 -->
        <div class="user-info">
            <div class="img-wrap">
                <img :src="info.photoPath || defaultPhotoPath" alt="" />
            </div>
            <div class="info-wrap mleft-20">
                <div class="font-24 font-bold">{{ info.nickname }}</div>
                <div class="info-btn">
                    <div>
                        <span class="font-14 sex-wrap">
                            性别：
                            <i v-if="info.gender == 1" style="color: #3da1d1" class="el-icon-male"></i>
                            <i v-else-if="info.gender == 2" style="color: #ea5a95" class="el-icon-female"></i>
                            <i v-else-if="info.gender == 0" style="color: #666; font-style: normal">保密</i>
                        </span>
                        <span class="mleft-10 font-14 sex-wrap">
                            生日：{{ birthday }}
                        </span>
                    </div>
                </div>

                <div class="desc-item mtop-10 font-14">
                    个人介绍：{{ info.signature || "什么都没有介绍" }}
                </div>
            </div>
        </div>
        <div class="menu-wrap mtop-20">
            <TabMenu :menuList="['创建的公开歌单']"></TabMenu>
        </div>
        <!--列表 -->
        <div class="mtop-20" v-show="showTab === 1">
            <template v-if="list.length === 0">
                <span>暂无歌单</span>
            </template>
            <template v-else-if="creList.length !== 0">
                <ImgList @clickImg="toPlayListDetail" :list="creList" type="playlist">
                    <template v-slot="{ item }">
                        <div class="text-hidden">
                            {{ item.name }}
                        </div>
                    </template>
                </ImgList>
            </template>
            <template v-else>
                <span>该用户没有创建的歌单或已隐藏</span>
            </template>
        </div>
    </div>
</template>
  
<script>
import ImgList from "@/components/list/ImgList.vue";
import TabMenu from "@/components/menu/TabMenu.vue";
import { getCommentUserInfo } from "@/api/api_playlist"
import { mapState } from "vuex";
import dayjs from "dayjs";

export default {
    components: { ImgList, TabMenu },
    data() {
        return {
            info: {}, //基本信息
            list: [], //歌单列表
            offset: 0,
            showTab: 1,
            isLoading: true,
            defaultPhotoPath: require("../../assets/img/avatar.jpeg"),
        };
    },
    computed: {
        birthday() {
            return this.info.birthday
                ? dayjs(this.info.birthday).format("YYYY-MM-DD")
                : dayjs(new Date()).format("YYYY-MM-DD");
        },
        /* 用户/个人 创建/收藏的歌单 */
        creList() {
            return this.list;
        },
        subList() {
            return this.list;
        },
        ...mapState(["profile", "isLogin", "account"]),
    },
    created() {
        this.list = [];
        this.isLoading = true;
        this.getDetail();
    },
    methods: {
        /* 获取详情信息 */
        async getDetail() {
            //路由带参数传过来的UUID，然后通过UUID来进行数据访问
            let uuid = this.$route.params.uuid;
            let res = await getCommentUserInfo(uuid);
            if(res.code==200){
                this.info=res.userInfo;
                this.list=res.playLists;//目前这里已经确保的是私有歌单！！
                this.isLoading = false;
            }
        },
        toPlayListDetail(id) {
            this.$router.push({ path: "/playlistdetail/" + id });
        },
    },
};
</script>
  
<style lang="less" scoped>
.user-info {
    display: flex;

    .img-wrap {
        height: 100px;
        width: 100px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .info-wrap {
        flex: 1;

        .info-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
        }

        .desc-item {
            color: #676767;
        }
    }
}

@media screen and (max-width: 415px) {
    .img-wrap {
        display: none;
    }
}
</style>
  